const path = require("path")
const {VueLoaderPlugin} = require("vue-loader")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
// 生成html文件
const HtmlWenPackPlugin = require("html-webpack-plugin")


// // 正式使用时注释掉下面行代码，此行代码只用来编写配置文件时提示
// import weback from "webpack" 
// /**
//  * @type {weback.Configuration}
//  */
const config = {
    // 打包入口
    entry:"./src/main.js",
    // 打包输入的文件
    output:{
        // 打包生成的js名称：{build.js}
        filename:"build.js",       
        // 打包文件放置的文件夹名称：{当前文件夹的dist文件夹}
        path:path.join(__dirname,"dist")
    },
    // 配置加载器
    module:{
        // rules是一个数组
        rules:[
            /**
             * test:根据正则匹配文件，$ 结尾
             * use:匹配到资源后交给 vue-loader 来解析
             */
            {
                test:/\.vue$/,
                use:"vue-loader"
            },
            {
                test:/\.css$/,
                use: [MiniCssExtractPlugin.loader,'css-loader'] 
            }
        ]
    },
    plugins:[
        new HtmlWenPackPlugin({
            template:"./public/index.html"
        }),
        new MiniCssExtractPlugin(),
        new VueLoaderPlugin()
    ]
}

module.exports = config;